import React, { Component } from 'react';
import styles from './citySelect.css';
import cData from './cityData';
import ScrollTopBtn from './scrollTopBtn/scrollTopBtn';

const firstLetterList = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

class CitySelect extends Component {

  // scrollHandler = this.handleScroll.bind(this);
  // componentDidMount() {
  //   window.addEventListener('cityWrapper', this.scrollHandler);
  // }
  // _handleScroll(scrollTop) {
  //   console.log("1",scrollTop)         //滚动条距离页面的高度
  // }
  // handleScroll(event) {
  //   let scrollTop = event.srcElement.body.scrollTop;
  //   this._handleScroll(scrollTop);
  // }

  constructor(props) {
    super(props);
    this.state = {
      cityData:cData,
      letterData:firstLetterList,
    }
  }

  initList () {
    const { cityData } = this.state;
    const { selectCity } =  this.props;
    return (
      cityData ? cityData.initCityData().map((group, index) => (
          <a id={group.name} key={index.toString()}>
            <div className={styles.cities}>
            <div className={styles.title}>{group.name}</div>
              <ul>
                {group.cities.map((g, gIndex) =>
                  <li
                    key={gIndex.toString()}
                    className={styles.item}
                    data-name={g.name}
                    data-id={g.cityid}
                    onClick={() => selectCity(g.name)}
                    >
                    <span className={styles.name}>{g.name}</span>
                  </li>
                )}
              </ul>
            </div>
          </a>
        )
      ):''
    )
  }

  scrollToAnchor = (anchorName) => {
    // console.log('anchorName',anchorName);
    if (anchorName) {
        // 找到锚点
        let anchorElement = document.getElementById(anchorName);
        // console.log('anchorElement',anchorElement);
        // 如果对应id的锚点存在，就跳转到锚点
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
  }

  showScrollTopBtn = () => {
    const scrollTopBtnPrps = {
      onClickScrollTop(){
        // 找到锚点
        let anchorElement = document.getElementById("titleTop");
        console.log('anchorElement',anchorElement);
        // 如果对应id的锚点存在，就跳转到锚点
        if(anchorElement) { anchorElement.scrollIntoView(); }
      }
    }

    return (
      <ScrollTopBtn {...scrollTopBtnPrps}/>
    )
  }

  //当前城市
  showCurrentCity () {
    const { selectCity } =  this.props;
    let currentCity = window.MC.cityName;
    return(
      <div className={styles.historicalRecords}>
        <div className={styles.historyTitle}>当前城市</div>
        <div className={styles.historyList}>
          <ul>
            <li onClick={() => selectCity(currentCity)}>{currentCity}</li>
          </ul>
        </div>
      </div>
    )
  }

  //历史记录
  historyRecordsList () {
    const { selectCity } =  this.props;
    if(localStorage.historyRecords){
      const dataList = JSON.parse(localStorage.historyRecords);
      // console.log('dataList', JSON.stringify(dataList));
      if(dataList.length > 0){
        return(
          <div className={styles.historicalRecords}>
            <div className={styles.historyTitle}>历史记录</div>
            <div className={styles.historyList}>
              <ul>
                {dataList.map((item, index) => {
                  return (<li key={index} onClick={() => selectCity(item)}>{item}</li>)
                })}
              </ul>
            </div>
          </div>
        )
      }
    }
  }

  render(){

    const { letterData } = this.state;

    return(
      <div className={styles.city}>
        <div className={styles.cityWrapper}>
          {/* <div className={styles.initial} style={{display:'none'}}>
            <div id="titleTop" className={styles.initialTitle}>首字母</div>
            <ul>
              {letterData ? letterData.map((item, index) => (
                <li
                  key={index.toString()}
                  onClick={() => this.scrollToAnchor(item)}>
                  {item}
                </li>
              )): ''}
            </ul>
          </div> */}

          {this.showCurrentCity()}

          {this.historyRecordsList()}

          {this.initList()}
          {/* {this.showScrollTopBtn()} */}

          <div className={styles.initialPlanB}>
            <div className={styles.initialPlanBList}>
              <ul>
                {letterData ? letterData.map((item, index) => (
                  <li
                    key={index.toString()}
                    onClick={() => this.scrollToAnchor(item)}>
                    <span>{item}</span>
                  </li>
                )): ''}
              </ul>
            </div>
          </div>
        </div>
      </div>
    )
  }

}

export default CitySelect;
